<template>
	<!-- 外层容器 -->
	<el-container>
		<!-- 侧边栏容器 -->
		<el-aside>
			<el-menu default-active="0" unique-opened background-color="#304156" text-color="#BFCBD9"
				style="border-right: none;" active-text-color="#409EFF" router>
				<el-menu-item index="home">
					<i class="el-icon-s-home"></i>
					<span slot="title">网站主页</span>
				</el-menu-item>


				<el-submenu index="2" v-if="role==1">
					<template slot="title">
						<i class="el-icon-delete-solid"></i>
						<span>系统管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="rootUser">系统用户管理</el-menu-item>
						<el-menu-item index="user">普通用户管理</el-menu-item>
						<el-menu-item index="consultNotice">公告管理</el-menu-item>
						<el-menu-item index="company">公司管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="3" v-if="role==1">
					<template slot="title">
						<i class="el-icon-s-goods"></i>
						<span>课程管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="courseType">课程分类管理</el-menu-item>
						<el-menu-item index="course">课程管理</el-menu-item>
						<el-menu-item index="courseEvaluation">课程评价管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="4" v-if="role==1">
					<template slot="title">
						<i class="el-icon-s-open"></i>
						<span>师资管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="consult">咨询师管理</el-menu-item>
						<el-menu-item index="consultLv">咨询师等级管理</el-menu-item>
						<el-menu-item index="field">擅长领域管理</el-menu-item>
						<el-menu-item index="chargeType">收费分类管理</el-menu-item>
						<el-menu-item index="charge">收费标准管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>

				<el-submenu index="5" v-if="role==1">
					<template slot="title">
						<i class="el-icon-s-open"></i>
						<span>内容管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="article">文章管理</el-menu-item>
						<el-menu-item index="articletype">文章分类管理</el-menu-item>
						<el-menu-item index="psychology">心理知识管理</el-menu-item>
						<el-menu-item index="fm">FM管理</el-menu-item>
						<el-menu-item index="commonweal">公益中心管理</el-menu-item>
						<el-menu-item index="mentaltest">心理测评管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="6">
					<template slot="title">
						<i class="el-icon-s-flag"></i>
						<span>心理答疑管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="question">问题管理</el-menu-item>
						<el-menu-item index="reply">回复管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
				<el-submenu index="7">
					<template slot="title">
						<i class="el-icon-s-management"></i>
						<span>咨询预约管理</span>
					</template>
					<el-menu-item-group>
						<el-menu-item index="appointment">资讯预约管理</el-menu-item>
						<el-menu-item index="consultreply">资讯回复管理</el-menu-item>
						<el-menu-item index="assessment">用户评价管理</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- 顶栏容器 -->
			<el-header>
				<div class="header-left">
					<i class="el-icon-s-fold icon"></i>
				</div>
				<div class="header-right">
					<!-- @command：是函数，专门处理下拉框中的请求事件的  -->
					<el-dropdown @command="handleCommand" trigger="click">
						<span class="el-dropdown-link">
							<img src="../assets/小恶魔跳跃.png" alt=""> 你好, {{username}}
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
							<el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
							<el-dropdown-item command="system">系统设置</el-dropdown-item>
							<el-dropdown-item command="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>
			<!-- 主要区域容器 -->
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				username: '',
				role:''
			}
		},

		mounted() {
			this.username = sessionStorage.getItem('username');
			this.role = sessionStorage.getItem('role')
		},

		methods: {

			// 处理顶部用户下拉框信息
			handleCommand(command) {
				//this.$message('click on item ' + command);
				if (command == 'logout') {
					sessionStorage.clear();
					this.$router.push('/login')
				}else if(command == 'userInfo'){
					this.$router.push('/centre')
				}else if(command == 'editPassword'){
					this.$router.push('/editPassword')
				}
			}
		}
	}
</script>
<style>
	.el-container {
		height: 100vh;
	}

	.el-aside {
		width: 210px !important;
		background-color: #304156;
		height: 100%;
	}

	.el-header {
		height: 60px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
	}





	/* header头部样式 */
	.header-left {
		float: left;
	}

	.header-left .icon {
		font-size: 26px;
		padding-top: 17px;
		cursor: pointer;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.header-right {
		float: right;
		line-height: 60px;
	}

	.header-right img {
		height: 50px;
		vertical-align: middle;
	}
</style>